<template>
  <div class="middle1">
    <div class="middle" v-for="i in jingdian" :key="i.id">
        <img v-bind:src="i.img" alt="">
        <ul class="d2">
          <li>
            <span>{{i.nm}}</span>
            <span v-if="i.globalReleased&&i.sc!==0" class="sb1"><span :style="{color:'#faaf00'}" class="sb2">{{i.sc}}</span>分</span>
          </li>
          <li v-if="i.enm!==''">{{i.enm}}</li>
          <li>{{i.cat}}</li>
          <li>{{i.pubDesc}}</li>
        </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "jingdian",
  data(){
    return {
      jingdian:[],
    }
  },
  mounted() {
    axios.get('/ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=10&optimus_uuid=06149BA0543011EC8181334F641EF384F37410C2C72A4120B3C6E689A57F684B&optimus_risk_level=71&optimus_code=10').then(res=>{
      console.log(res.data.classicMovies.list);
      this.jingdian = res.data.classicMovies.list;
    })
  }
}
</script>

<style scoped>
.middle1{
  margin-top: 160px;
  margin-bottom: 55px;
}
.middle {
  display: flex;
  align-items: center;
  width: 98%;
  background: white;
  overflow: scroll;
  text-decoration: none;
  margin-bottom: 10px;
}
.d2 {
  width: 250px;
}

.d2 li {
  margin-bottom: 5px;
  margin-left: 10px;
  font-size: 16px;
  color: gray;
  list-style: none;
}
.d2 li .sb1{
  font-size: 14px;
  color: gray;
  float: right;
}
.d2 li .sb2{
  font-size: 18px;
}

.d2 li:nth-of-type(1) {
  color: #333333;
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bolder;
  text-align: left;
}


.middle img {
  width: 80px;
  height: 110px;
  margin-top: 5px;
  margin-left: 20px;
}
</style>